<template>
  <div class="dl-row-sb class-box mar-bottom comment-box">
		<div class="left" v-loading="loading">
		  <!-- <div class="answer-box my-comment"> -->
			<div  v-if="data.length>0">
				<div v-for="(item,index) in data" :key="index" class="answer-box">
				  <div class="flex">
					<img :src="item.avatar" style="border-radius: 50%;">
					<div class="ml-3 flex-1">
					  <div class="dl-row-sb">
						<h1>{{item.userName}}</h1>
						<el-rate v-model="item.score" disabled show-score :colors="colors">
						</el-rate>
					  </div>
					  <div class="teacher">{{item.remark}}</div>
					  <div class="">
						<span class="ml-auto">{{item.createTime}}</span>
					  </div>
					</div>
				  </div>
				</div>
				<el-pagination
				  :total="total"
				  :current-page="page + 1"
				  style="margin-top: 8px;"
				  layout="total, prev, pager, next, sizes"
				  @size-change="sizeChange"
				  @current-change="pageChange"/>
		    </div>
			<div  v-if="data.length==0 && !loading"  >
				<el-empty description="无评价" class="emptyClass"  :image-size="250" :image="require('../../../assets/no_data_images/no_comment.png')" ></el-empty>
			</div>	
		</div>


    <div class="right">
      <div class="score-box dl-column center">
        <h2>课程综合评分</h2>
        <div style="font-weight: 600;">{{courseScore.score}}&nbsp;分</div>
        <el-rate v-model="courseScore.score" disabled :colors="colors">
        </el-rate>
        <el-button type="success" @click="gradeForm()" round>我要评价</el-button>
      </div>
      <!-- <div class="score-box dl-column center">
        <img :src="userImg">
        <h5>{{couserObj.teacherName}}</h5>
        <p>曾就职于百度，主导参与多个前端开发项目，积累了大量实战经验。在教学过程中，擅长引导学生独立思考，从多个角度带你了解前端知识。最早一批接触并在社区贡献了大量原创项目和代码。</p>
      </div> -->
    </div>
	<course-grade-form ref="gradeFrom"></course-grade-form>
  </div>
</template>

<script>
	import { pageCourseGradeList } from '@/api/course'
	import initData from '@/mixins/initData'
	import courseGradeForm from './courseGradeForm.vue'
	export default {
		mixins: [initData],
		components: { courseGradeForm },
		props:{
			couserObj:{
				type:Object,
				default:null,
			},
			courseScore:{
				type:Object,
				default:null,
			}
		},
	  data() {
		return {
		  loading:false,
		  courseId: this.$route.query.courseId,
		  userImg: require('../../../assets/image/u353.png'),
		   colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
		}
	  },
	  created() {
	  	this.$nextTick(() => {
	  	    this.init();
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'course-grade/page-list-pc'
		    this.params = {
		      page: this.page,
		      size: this.size,
		      courseId: this.courseId
		    }
		    return true
		},
		gradeForm(){
			this.$refs.gradeFrom.dialog = true
			this.$refs.gradeFrom.isRefesh = true
			this.$refs.gradeFrom.form.courseId = this.couserObj.id
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.emptyClass{
		height: calc(100vh - 594px);
	}
	.comment-box{
	  h1{
		font-size: 14px;
		color: #666666;
	  }
	  .teacher{
		  
		background: none;
		padding: 0;
		font-size: 14px;
		color: #1A1A1A;
		line-height: 20px;
	  }
	}
	.my-comment{
	  border: none;
	  background: #f6f6f6;
	}
	.class-box{
		min-height: calc(100vh - 594px);
	}
</style>